<!--长效养护详情-->
<template>
  <page-meta
    :page-font-size="baseFontSize + 'rpx'"
    :root-font-size="baseFontSize + 'rpx'"
  ></page-meta>
  <view class="u-page flex flex-direction">
    <view class="yh-base-info">
      <view class="name">{{ taskName }}</view>
      <view>{{ facilityName }}-{{ compName }}</view>
      <view style="background-color: #fff">
        施工案卷：
        <text style="word-break: break-word">{{ caseCodes }}</text>
      </view>
      <view style="color: red">
        施工方案：
        <view v-html="content"></view>
      </view>
      <view style="color: red">期望完成时间：{{ expectEndDate }}</view>
    </view>
    <view class="item" v-for="(item, index) in dataList" style="background-color: #fff">
      <view class="item" @tap="toTaskDetail(item)">
        <view class="flex justify-between align-center">
          <text class="name">{{ item.taskName }}</text>
          <uni-icons type="forward" size="16" color="#597EF7"></uni-icons>
        </view>
        <view class="flex justify-between align-end">
          <view class="time">
            <view>{{ item.facilityName }}-{{ item.partNames }}-{{ item.compNames }}</view>
            <view style="word-break: break-all">施工案卷：{{ item.caseCodes }}</view>
            <view style="color: red">期望完成时间：{{ item.expectEndDate }}</view>
          </view>
          <!-- <view
				class="btn"
				@tap="
				  navTo(
					`/pages/addForm/changxiaoyanghu?id=${item.taskId}&projectName=${item.taskName}&facilityName=${item.facilityName}&placeName=${item.partNames}&compName=${item.compNames}&componentId=${item.compIds}&frequencyValue=${item.frequencyValue}`
				  )
				"
				>任务上报</view
			  > -->
        </view>
      </view>
    </view>
    <scroll-view class="uni-swiper-tab" scroll-x :style="'margin-top:' + top + 'px'">
      <view class="list" v-for="(item, index) in taskDetail.cases" :key="item.id">
        <view class="yh-item">
          <view
            class="yh-item-hd date flex align-center justify-between"
            @click="handleShow(item)"
          >
            <view>{{ timeTranfer(item.updateTime) }}</view>

            <view class="icon">
              <button type="primary" @click="guide(item)" style="margin-right: 15rpx">
                导航
              </button>
              <button type="primary" @click="goToReportChang(item)">
                {{ Number(item.caseStatus) == 3 ? '查看记录' : '施工上报' }}
              </button>
            </view>
          </view>
          <view class="yh-item-bd" v-if="!item.isShow">
            <!-- <view class="time">{{ item.endDate }}</view> -->
            <view class="base-info">
              <view>案卷编号：{{ item.caseCode }}</view>
              <view
                >病害部位：{{ item.facilityName }}-{{ item.diseaseLocationName }}-{{
                  item.brokenCommpontName
                }}</view
              >
              <view>病害类型：{{ item.brokenTypeName || '-' }}</view>
              <view>病害描述：{{ item.brokenDesc || '-' }}</view>
              <view>病害损害面积：{{ item.area > 0 ? item.area : '0' }} m2</view>
              <view>病害位置：{{ item.location }}</view>
              <view class="imgbox" v-if="item.brokenImg && item.brokenImg.length">
                <image
                  style="width: 120upx; height: 120upx"
                  :src="imgSrc"
                  v-for="(imgSrc, imgIndex) in item.brokenImg.split(',')"
                  @click="previewImage(item.brokenImg.split(','), imgIndex)"
                  :key="imgIndex"
                ></image>
              </view>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>

    <!-- <view class="page-footer"
		><button
		  @tap="goToReportChang()"
		  class="save-btn cu-btn block bg-blue lg"
		>
		  任务上报
		</button></view
	  > -->
  </view>
</template>

<script>
import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js';
import { getChangXiaoListApi } from '@/api/system/changxiao.js';
import moment from 'moment';
export default {
  mixins: [MescrollMixin],
  data() {
    return {
      list: 20,
      detailId: '',
      projectName: '',
      facilityName: '',
      compName: '',
      taskName: '',
      caseCodes: '',
      expectEndDate: '',
      frequencyValue: '',
      longTypeName: '',
      dataList: [],
      refresherStatus: 0,
      taskDetail: {},
      caseStatus: null,
      content: null,
      top: null
    };
  },
  computed: {
    baseFontSize() {
      return this.$store.getters.fontSize;
    }
  },
  onLoad(e) {
    console.log('%c [ e ]-134', 'font-size:13px; background:pink; color:#bf2c9f;', e);
    if (e && e.id) {
      this.detailId = e.id;
      this.projectName = e.projectName;
      this.facilityName = e.facilityName;
      this.compName = e.compName;
      this.taskName = e.taskName;
      this.placeName = e.placeName;
      this.componentId = e.componentId;
      this.caseCodes = e.caseCodes;
      this.expectEndDate = e.expectEndDate;
      this.caseStatus = e.caseStatus;
      this.content = e.content;
      this.getDetail();
    }
    this.taskDetail = uni.getStorageSync('taskDetail');
    console.log(
      '%c [ this.taskDetail ]-108',
      'font-size:13px; background:pink; color:#bf2c9f;',
      this.taskDetail
    );
  },
  mounted() {
    this.getElementRect();
  },
  methods: {
    getElementRect() {
      const query = uni.createSelectorQuery().in(this);
      query
        .select('.yh-base-info')
        .boundingClientRect((res) => {
          console.log(res);
          this.top = res.height;
        })
        .exec();
    },
    previewImage(photoImg, index) {
      uni.previewImage({
        current: index,
        urls: photoImg
      });
    },
    handleShow(selectItem) {
      this.dataList = this.dataList.map((item) => {
        if (selectItem.longReportId === item.longReportId) {
          item.isShow = !item.isShow;
        }
        return {
          ...item
        };
      });
    },
    timeTranfer(date) {
      return moment(date).format('YYYY-MM-DD HH:mm:ss');
    },
    goToReportChang(item) {
      console.log(
        '%c [ item ]-179',
        'font-size:13px; background:pink; color:#bf2c9f;',
        item
      );
      uni.setStorageSync('caseItem', item);
      this.$tab.navigateTo(
        `/pages/addForm/shigongshangbao?id=${this.detailId}&projectName=${this.projectName}&caseStatus=${item.caseStatus}&casecode=${item.id}&facilityName=${this.facilityName}&compName=${this.compName}&componentId=${this.componentId}&placeName=${this.placeName}`
      );
    },
    guide(item) {
      console.log(
        '%c [ item ]-193',
        'font-size:13px; background:pink; color:#bf2c9f;',
        item
      );
      let { lat: latitude, lng: longitude, location: name } = item;
      uni.openLocation({
        latitude: Number(latitude),
        longitude: Number(longitude),
        name,
        success: function () {
          console.log('success');
        }
      });
    },
    getDetail() {
      this.taskDetail = [];
      this.taskDetail = uni.getStorageSync('taskDetail');
      console.log(uni.getStorageSync('taskDetail'), 'uni.getStorageSync');
      console.log(this.taskDetail.cases, 'this.taskDetail');

      this.$refs.paging && this.$refs.paging.complete(this.taskDetail.cases);
    },

    navTo(path) {
      this.$tab.navigateTo(path);
    }
  }
};
</script>

<style lang="scss" scoped>
@import './index.scss';
.u-page {
  height: 100vh;
  background: #fff;
}
.yh-item-bd {
  background: #fff;
}
.list {
  margin-top: 30upx;
}
.yh-base-info {
  line-height: 4rem;
  font-size: 2.4rem;
  color: #999;
  padding: 24upx 32upx;
  position: fixed;
  background: #fff;
  z-index: 99;
  .name {
    font-size: 3.2rem;
    line-height: 4.4rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 20upx;
  }
}
.uni-swiper-tab {
  background-color: #fff;
  padding-bottom: 10px;
}
.main {
  min-height: 0;
  overflow: auto;
}
.yh-item {
  line-height: 4.2rem;
  font-size: 2.4rem;
  .icon {
    // width: 20upx;
    display: flex;
    font-size: 3.4rem;
    color: #597ef7;
    button {
      width: 10rem;
      height: 3.8rem;
      font-size: 2rem;
      text-align: center;
      line-height: 3.8rem;
      padding: 0;
      margin: 0;
    }
  }
  .time {
    color: #333;
    padding: 28upx 34upx 20upx;
  }
  .base-info {
    padding-left: 36upx;

    color: #999;
    view + view {
      margin-top: 8upx;
    }
    .imgbox {
      display: flex;
      flex-wrap: wrap;
      grid-gap: 40upx;
      gap: 40upx;
    }
  }
}
.page-footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 1;
}
</style>
